<template>
    <div class="form">
        <el-tabs v-model="tabName"
                 type="border-card"
                 style="width:100%;padding: 0px">
            <el-tab-pane label="我的信息"
                         name="tabName"
                         style='padding:1em;background-color:white'>
                <div class="box">
                    <el-form ref="form"
                             class="box_acct_form"
                             :model="form"
                             label-width="120px">
                        <el-row v-show="false">
                            <el-col :span="12">
                                <el-form-item label="主键id:"
                                              prop="id"
                                              label-width="130px">
                                    <el-input
                                              size="medium"
                                              v-model="form.u_id"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="*用户账号:">
                                    <el-input size="medium"
                                              readonly
                                              v-model="form.username"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="*用户名称:">
                                    <el-input size="medium"
                                              readonly
                                              v-model="form.nickname"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="*性别:">
                                    <el-input size="medium"
                                              class="input"
                                              disabled
                                              v-model="form.sex"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="*类型:">
                                    <el-input size="medium"
                                              class="input"
                                              disabled
                                              v-model="form.type"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="联系电话:">
                                    <el-input size="medium"
                                              readonly
                                              v-model="form.phone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱:">
                                    <el-input size="medium"
                                              readonly
                                    v-model="form.email"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="生效时间:" >
                                    <el-date-picker v-model="form.createtime"
                                                    class="input"
                                                    size="medium"
                                                    type="date"
                                                    style="width: 100%;background-color: #FAFAFA"
                                                    disabled
                                                    placeholder="请选择出生日期"
                                                    format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细住址:">
                                    <el-input size="medium"
                                              class="input"
                                              disabled
                                              v-model="form.homeaddress"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="我的车位:">
                                    <el-input size="medium"
                                              readonly
                                              v-model="form.parkname"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="计费状态:">
                                    <el-input size="medium"
                                              readonly
                                              v-model="form.coststatus"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24" >
                            <el-col :span="12" style="width: 100%">
                                <el-form-item label="我的描述:" >
                                    <el-input type="textarea"
                                              readonly
                                              rows="2"
                                              v-model="form.note"
                                              size="medium"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>

        <div class="panel" style="margin-top: 20px" >
            <p class="panel-title" style="font-weight: bolder;margin-left: 10px;padding: 0 1px">头像信息/更换</p>
            <el-card class="box-card" shadow="always">
                <div class="panel-body" style="">
                    <div class="btn_div" style="display: flex">
<!--                        <div style="margin-top: 17px;margin-left: 20px;cursor: pointer;">-->
<!--                            <img :src="icon" style="width: 280px;height: 240px">-->
<!--                        </div>-->
                        <div style="margin-top: 17px;margin-left: 20px;cursor: pointer;">
<!--                            <viewer :images="icon">-->
<!--                                <img :src="icon" style="width: 260px;height: 240px">-->
<!--                            </viewer>-->
<!--                            viewer插件指令使用-->
                            <div class="imgDiv" v-viewer="{movable: true}">
                                <img :src="icon" style="width: 260px;height: 240px">
                            </div>
                        </div>
                        <el-upload
                                class="avatar-uploader"
                                :action="iconUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
<!--                            <i slot="default" class="el-icon-plus"></i>-->
<!--                            <div slot="file" slot-scope="{file}">-->
<!--&lt;!&ndash;                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">&ndash;&gt;-->
<!--                                -->
<!--                                <span class="el-upload-list__item-actions">-->
<!--                                     <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">-->
<!--                                         <i class="el-icon-zoom-in"></i>-->
<!--                                     </span>-->
<!--                                    <span v-if="!disabled"-->
<!--                                          class="el-upload-list__item-delete"-->
<!--                                          @click="handleDownload(file)">-->
<!--                                         <i class="el-icon-download"></i>-->
<!--                                     </span>-->
<!--                                    <span v-if="!disabled"-->
<!--                                          class="el-upload-list__item-delete"-->
<!--                                          @click="handleRemove(file)">-->
<!--                                         <i class="el-icon-delete"></i>-->
<!--                                     </span>-->
<!--                                </span>-->
<!--                            </div>-->
<!--                        <el-dialog :visible.sync="dialogVisible">-->
<!--                            <img width="100%" :src="dialogImageUrl" alt="">-->
<!--                        </el-dialog>-->
                    </div>
                </div>
            </el-card>

        </div>
    </div>
</template>

<script>
    export default {
        name: "personalMessage",
        data() {
            return{
                tabName: 'tabName',
                icon: '',
                headImg: '',
                imageUrl: '',
                imgPath: this.basePath + "/file/",
                // dialogImageUrl: '',
                // dialogVisible: false,
                disabled: false,
                form:{
                    u_id: '',
                    username:'',
                    nickname:'',
                    email:'',
                    phone:'',
                    sex:'',
                    type:'',
                    createtime:'',
                    homeaddress:'',
                    parkname: '',
                    coststatus: '',
                    note:'',
                },
                chinaArr:{
                    1: '管理员',
                    2: '普通用户'
                },
                status:{
                    1: '已缴费',
                    2: '未缴费',
                    '': '暂无'
                }
            }
        },
        created(){
            let token = sessionStorage.token;
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.form.u_id = result.id;
                    this.icon = this.basePath+"/file/"+result.head
                })
            });
            this.iconUrl = this.basePath + `/users/updateIcon?token=${token}`;
            this.getFormData();
        },
        mounted(){

        },
        methods:{
            getFormData(){
                this.$axiosToken({
                    url: '/users/getMyId',
                    method: 'post',
                    data: {
                        id: this.form.u_id
                    },
                    success: (result=>{
                        this.form.username = result[0].username;
                        this.form.nickname = result[0].nickname;
                        this.form.email = result[0].email;
                        this.form.phone = result[0].phone;
                        this.form.sex = result[0].sex;
                        this.form.type = this.chinaArr[result[0].type];
                        this.form.createtime = result[0].createtime;
                        this.form.homeaddress = result[0].homeaddress;
                        this.form.parkname = result[0].parkname;
                        this.form.coststatus = this.status[result[0].coststatus];
                        this.form.note = result[0].note;
                    })
                })

            },

            // 修改头像
            // handleRemove(file) {
            //     console.log(file);
            // },
            // handlePictureCardPreview(file) {
            //     this.dialogImageUrl = file.url;
            //     this.dialogVisible = true;
            // },
            // handleDownload(file) {
            //     console.log(file);
            // },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.$message({
                    message: '头像更换成功,重新登录即可查看',
                    type: 'success'
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }


        },
    }
</script>

<style scoped>
    .form{
        width: 99%;
        margin-left: 3px;
    }
    .el-row{
        margin-top: 20px;
    }
    .box-card{
        margin-top: 10px;
        margin-bottom: 5px;
        width: 100%;
        height: 300px;
        background: #FFF;

    }
    .input>>>.el-input__inner{
        background-color: #FAFAFA;
        /*background-color: #f3f3f1;*/
        color: grey;
    }

    /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    /deep/.avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    /deep/.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    /deep/.avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    /*/deep/.el-textarea.is-disabled .el-textarea__inner {*/
    /*    background-color: #FAFAFA;*/
    /*}*/
    /deep/[data-v-242b4c70] .avatar-uploader .el-upload {
        border: 1px dashed #108aea;
        border-radius: 6px;
        margin-left: 50px;
        margin-top: 40px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
</style>